<template>
    <div class="contain">
      <div class="topp">

      
       <el-input
       id="made"
          v-model="queryParams.ipaddr"
          placeholder="请输入要搜索的设备"
          clearable
          style="width: 240px;"
          size="small"
          @keyup.enter.native="handleQuery"
        />
       <el-button class="seach" type="primary" @click="handleQuery" icon="el-icon-search">搜索</el-button>
       <div class="sum">
           <span>未激活</span>
           <span>{{$store.getters.total-summ}}</span>
        </div>
       
       <div class="sum">
           <span>已激活</span>
           <span>{{summ}}</span>
        </div>
       
       <div class="sum">
           <span>总 数 </span>
           <span>{{$store.getters.total}}</span>
        </div>
        <div class="device">

        <el-button type="success" @click="handleAdd" round>添加设备</el-button>
         <el-button type="danger" @click="handledel" :disabled="jj" round>删除设备</el-button>
        </div></div>
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="设备名称" prop="postName">
          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="设备编码" prop="postCode">
          <el-input v-model="form.deviceId" placeholder="请输入设备编码" />
        </el-form-item>
        <el-form-item label="设备id" prop="postSort">
          <el-input v-model="form.id" placeholder="请输入设备id" />
        </el-form-item>
        <el-form-item label="设备状态" prop="status">
          <el-radio-group v-model="form.state">
            <el-radio
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <router-view></router-view>
    </div>
    
</template>

<script>
  import {adddev,deldev} from '@/api/zhu/index.js'
    export default {
        name:'Dev',
        data(){
            return {
               
                input:'',
                sum:307,
                title: "",
                open:false,
                 queryParams: {
        pageNum: 1,
        pageSize: 10,
        postCode: undefined,
        postName: undefined,
        status: undefined,
      },
                form:{

                },
                rules: {
        deviceName: [
          { required: true, message: "设备名称不能为空", trigger: "blur" },
        ],
        deviceId: [
          { required: true, message: "设备编码不能为空", trigger: "blur" },
        ],
        id: [
          { required: true, message: "id不能为空", trigger: "blur" },
        ]},
                statusOptions:[{
                    dictValue:'1',
                    dictLabel:'正常'
                },{
                    dictValue:'2',
                    dictLabel:'停用'
                }]
            }
        },
        computed:{
          summ(){
            return this.$store.getters.postlist.filter((item)=>{
                return item.state==1
            }).length
          },
          jj(){
            return this.$store.getters.ids.length>0?false:true
          }
        },
        mounted(){
          this.devall();
           
        },
        methods:{
            devall(){
              this.$router.push({
               path:'/dev/devall',
              
            })
            },
            handleQuery(){
              
                if(!this.queryParams.ipaddr){
                  this.$store.dispatch('zhu/toglist',this.queryParams)
                }
                else{

                  this.$store.dispatch('zhu/togquery',{id:this.queryParams.ipaddr})
                }
              

            },
            handleAdd(){
                this.open=true;
            },
            cancel(){
              this.open=false
            },
            handledel(){
              const ids=this.$store.getters.ids;
              if(!ids.length>0){
                   
              }
              else{
              
         this.$confirm('是否确认删除编号为"'+ ids+ '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(()=>{

           deldev({id:ids[0]}).then(()=>{

             this.$store.dispatch('zhu/toglist',this.queryParams).then(()=>{
                  this.$store.commit('zhu/hhh',[]);
             })
           })
        })
        .catch(res=>{
console.log('object');
        })}
            }
            ,
            submitForm(){
              adddev(this.form).then((res)=>{
                this.msgSuccess("添加成功");
                this.$store.dispatch('zhu/toglist',this.queryParams).then((res)=>{
                
  
                
                this.open = false;
                 });
              })
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
.contain{
    position: relative;
    padding: 20px;
}
#made.el-input__inner{
            height: 37px !important;
            line-height: 37px;
}
.sum{
    // position: absolute;
    display: flex;
    flex-direction: column;
    float: right;
    justify-content: center;
    font-size: 1.5em;
    margin-right: 50px;
    color:yellowgreen;
    align-items: center;
}
.device{
    margin-top: 30px;
}
.seach{
    position: relative;
    left: -5px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom:2px solid #409EFF;
}
.topp{
    height: 180px;
    // border:1px solid #333333
}

</style>